// 第一步获取节点
let apiTypeData = [
	{ name: "全部", keyword: "身份证实名", isnew: false },
	{ name: "生活服务", keyword: "银行卡", isnew: false },
	{ name: "金融科技", keyword: "短信", isnew: false },
	{ name: "交通地理", keyword: "天气", isnew: false },
	{ name: "充值缴费", keyword: "短信", isnew: false },
	{ name: "数据智能", keyword: "手机归属地", isnew: false },
	{ name: "企业工商", keyword: "IP", isnew: false },
	{ name: "应用开发", keyword: "手机归属地", isnew: false },
	{ name: "电子商务", keyword: "IP", isnew: false },
	{ name: "吃喝玩乐", keyword: "视频", isnew: false },
	{ name: "文娱视频", keyword: "视频", isnew: false },
	{ name: "免费接口大全", keyword: "短信", isnew: true },
	{ name: "短信", keyword: "身份证实名", isnew: false },
	{ name: "汽车", keyword: "银行卡", isnew: false },
	{ name: "核验", keyword: "银行卡", isnew: false },
	{ name: "最新发布", keyword: "银行卡", isnew: true },
	{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
];
// console.log(apiTypeData);
//功能一,动态渲染API分类区
//1.获取后台数据进行遍历
let html = "";
apiTypeData.forEach(function (v, i) {
	//2.遍历是拼接HTML结构
	//如何将激活样式和加粗样式加上
	if (i === 0) {
		html += `<li class="active" title= ${v.keyword}>${v.name}</li>`;
	} else if (v.isnew) {
		html += `<li title= ${v.keyword} class="fw-bold">${v.name}</li>`;
	} else {
		html += `<li title=${v.keyword} > ${v.name}</li>`;
	}
});
console.log(html);
//3.将拼接的HTML结构放入对应的位置
$("#classificationList").innerHTML = html;

//功能二
//获取相关节点
// $('#classificationList li')
$("#classificationList li").forEach(function (v) {
	v.addEventListener("click", function () {
		//3.先排他,清除其他激活的li
		$("#classificationList li").forEach(function (v) {
			// console.dir(v.classList);
			v.classList.remove("active");
		});
		this.classList.add("active");

		// 功能三:点击API分类区的标签,联动下方的搜索框
		//1.将this的textContent赋值给strong
		$("#searchInput strong").textContent = this.textContent;
		//2.将this的title赋值给搜索框的value
		$("#searchInput input").value = this.title;
	});
});

//功能四:卡片区动态渲染
//1.获取后台数据
let listDataArr = [
	//第一行
	{
		img: "API_01.jpg",
		name: "2021出行防疫政策指南1",
		price: "免费",
		isSpecial: false,
	},
	{
		img: "API_02.jpg",
		name: "身份证实名认证1",
		price: "￥0.2000/次",
		isSpecial: true,
	},
	{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
	{
		img: "API_04.jpg",
		name: "银行卡四元素校验1",
		price: "￥0.3360/次",
		isSpecial: true,
	},
	{
		img: "API_05.jpg",
		name: "短信API服务1",
		price: "￥0.0400/次",
		isSpecial: true,
	},

	//第二行
	{
		img: "API_01.jpg",
		name: "2021出行防疫政策指南2",
		price: "免费",
		isSpecial: false,
	},
	{
		img: "API_02.jpg",
		name: "身份证实名认证2",
		price: "￥0.2000/次",
		isSpecial: true,
	},
	{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
	{
		img: "API_04.jpg",
		name: "银行卡四元素校验2",
		price: "￥0.3360/次",
		isSpecial: true,
	},
	{
		img: "API_05.jpg",
		name: "短信API服务2",
		price: "￥0.0400/次",
		isSpecial: true,
	},
	//第三行
	{
		img: "API_01.jpg",
		name: "2021出行防疫政策指南3",
		price: "免费",
		isSpecial: false,
	},
	{
		img: "API_02.jpg",
		name: "身份证实名认证3",
		price: "￥0.2000/次",
		isSpecial: true,
	},
	{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
	{
		img: "API_04.jpg",
		name: "银行卡四元素校验3",
		price: "￥0.3360/次",
		isSpecial: true,
	},
	{
		img: "API_05.jpg",
		name: "短信API服务3",
		price: "￥0.0400/次",
		isSpecial: true,
	},
	//第四行
	{
		img: "API_01.jpg",
		name: "2021出行防疫政策指南4",
		price: "免费",
		isSpecial: false,
	},
	{
		img: "API_02.jpg",
		name: "身份证实名认证4",
		price: "￥0.2000/次",
		isSpecial: true,
	},
	{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
	{
		img: "API_04.jpg",
		name: "银行卡四元素校验4",
		price: "￥0.3360/次",
		isSpecial: true,
	},
	{
		img: "API_05.jpg",
		name: "短信API服务4",
		price: "￥0.0400/次",
		isSpecial: true,
	},
];
//1.获取后台数据进行遍历
let cardsHtml = "";
listDataArr.forEach(function (v) {
	cardsHtml += `
    <li class="rel">
    <img src="../imgs/${v.img}" alt="" />

    <p>${v.name}</p>

    <p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>

    ${v.isSpecial ? '<span class="abs">企业专用</span>' : ""}

    <a href="" class="abs">申请数据</a>
</li>`;
});
//3.将Html结构放入指定位置
$("#travelList").innerHTML = cardsHtml;

//功能五:点击分页器的页码时,增加激活样式
//.1.获取相关节点
// $("pagination ul li");
//给页面绑定点击事件
$("#pagination ul li").forEach(function (v) {
	v.addEventListener("click", function () {
		//3.点击后先移除全部按钮的激活样式(排他思想)
		$("#pagination ul li").forEach(function (item) {
			item.classList.remove("active");
		});
		this.classList.add("active");
	});
});

//功能6
console.log("第一页", listDataArr.slice(0, 5));
console.log("第二页", listDataArr.slice(5, 10));
console.log("第三页", listDataArr.slice(10, 15));
console.log("第四页", listDataArr.slice(15, 20));

// 功能三,精灵图点击回到顶部
const returnList = document.querySelector("#Return");
returnList.addEventListener("click", function () {
	//2.点击后回到顶部
	// console.log(11);
	window.scrollTo({
		left: 0,
		top: 0,
		// 缓慢上去
		behavior: "smooth",
	});
});

// 申请数据蒙层
//获取相关节点
$("#mask");
//1. 获取祖先元素
$("#travelList");
//2.给祖先元素绑定点击事件  事件委派
$("#travelList").addEventListener("click", function (e) {
	console.dir(e);
	// console.log(11);
	//3.根据事件源localName属性进行区分,a标签
	if (e.target.localName === "a") {
		// 滚动条隐藏
		document.body.style.overflow = "hidden";
		//4.弹出蒙层
		$("#mask").style.display = "block";
		e.preventDefault(); //阻止a链接自动默认跳转
	}
});
//5.点击蒙层关闭蒙层
$("#mask").addEventListener("click", function () {
	this.style.display = "none";
	//点击后恢复
	document.body.style.overflow = "auto";
});
//6.阻止登录框的事件传播
$("#modal").addEventListener("click", function (e) {
	//阻止冒泡
	e.stopPropagation();
});

//功能二点击模态框
// 获取相关节点;
$("#mask form");
$("#modalnumber p");

//2.给$('#modalnumber p')绑定点击事件
$("#modalnumber p").forEach(function (v, i) {
	v.addEventListener("click", function () {
		//3.先排他,移除所有p标签的激活样式
		$("#modalnumber p").forEach(function (item, index) {
			item.classList.remove("active");
			$("#mask form")[index].style.display = "none";
		});
		this.classList.add("active");

		// 隐藏
		// $("#mask form").forEach(function (v) {
		// 	v.style.display = "none";
		// });
		$("#mask form")[i].style.display = "block";
	});
});
